Tiny File Manager | hub_webtrn_chart

Back Back Up Advanced Editor

<?php
//======================================================================================
//
// Function: List data
//
// Programmer: JKJ
// Date      : 2020-06-29
//
// Copyright Reeft A/S (c) - 2024
//======================================================================================
//
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
// http://www.tl-it.nl/docs/files/jqplot-core-js.html#Series.yaxis
// http://www.jqplot.com/docs/files/jqplot-core-js.html
//
//
// Chart.js
// https://www.chartjs.org/docs/latest/axes/styling.html?h=grid
// https://jsfiddle.net/crabbly/kL68ey5z/ -- PDF save
// https://github.com/emn178/chartjs-plugin-labels - text on pie
// https://emn178.github.io/chartjs-plugin-labels/samples/demo/
//
// https://stackoverflow.com/questions/34479079/how-do-i-find-last-monday-using-momentjs
//
//======================================================================================
// General config
//======================================================================================
	include "config/config.php";

//======================================================================================
// Get input
//======================================================================================

if (isset($_REQUEST["hub_webnam"])) {
		$hub_webnam = $_REQUEST["hub_webnam"];
	} else {
		// $hub_webnam = 'ALFA_ORC_TAKT_MesPhaseProgress';
		// $hub_webnam = 'ALFA_ORC_STOPTIME_GetWOList';
		// $hub_webnam = 'HUB_CONECT';
		// $hub_webnam = 'HUB_WEBTRN';
		$hub_webnam = '';
	}

if (isset($_REQUEST["fromdate"]))  				$fromDate 				= $_REQUEST["fromdate"];
	else $fromDate = 0;

if (isset($_REQUEST["todate"]))  				$toDate 				= $_REQUEST["todate"];
	else $toDate = 0;

if (isset($_REQUEST["input_hub_sertyp"]))  		$input_hub_sertyp 	= $_REQUEST["input_hub_sertyp"];
	else {
		$input_hub_sertyp = '';
	}

//======================================================================================
// Check input
//======================================================================================

//======================================================================================
// Set header texts
//======================================================================================

//======================================================================================
// Check if user is logged in?
//======================================================================================
	include "login_check.php";

//======================================================================================
// Get session variables
//======================================================================================
	include "include/getsession.php";

$datahub_text0108  = 'Jan';

//======================================================================================
// Set language
//======================================================================================
	include "include/set_language.php";

// Make kl lowercase
	$datahub_text0108_lower = strtolower($datahub_text0108);

//======================================================================================
// Set defaults
//======================================================================================

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $datahub_text0001 ?></title>

<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">

<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">

<script src="javascript/moment-with-locales.min.js"></script>
	<script src="javascript/moment-duration-format.min.js"></script>

<link href="javascript/datatables.3.12/datatables.min.css" rel="stylesheet">
		<script src="javascript/datatables.3.12/datatables.min.js"></script>

<style>

.modal-xxl {
    max-width: 80%;
}

.modal-xl {
    max-width: 50%;
}

.image-style-custom
{
	filter: drop-shadow(6px 6px 5px black)
}

.dropdown-item.active {
	background-color: ForestGreen;
}

.btn-custom-wide {
	height:60px;
	width:210px;
}

.small-text {
	font-size: 8px;
}

.overflow-class {
  width:99%;
  height:600px;
  /*max-height: calc(100vh - 283px);*/
  overflow-y: scroll;
  overflow-x: scroll;
}

</style>

//=============================================================================
// Globals
//=============================================================================

$(function () {
	  $.scrollUp({
		scrollName: 'scrollUp', // Element ID
		//topDistance: '1800', // Distance from top before showing element (px)
		//topSpeed: 300, // Speed back to top (ms)
		scrollDistance: '300', // Distance from top before showing element (px)
		scrollSpeed: 300, // Speed back to top (ms)
		animation: 'fade', // Fade, slide, none
		animationInSpeed: 200, // Animation in speed (ms)
		animationOutSpeed: 200, // Animation out speed (ms)
		scrollText: false, //'Scroll to top', // Text for element
		activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
	  });
	});

load = 0;

//-----------------------------------------------------------------------------------------
	// Input params
	//-----------------------------------------------------------------------------------------

var global_fromDate	 					= '<?php echo $fromDate ?>';
	var global_toDate	 					= '<?php echo $toDate ?>';

var firstTime 							= 0;

var GLOBAL_HUB_NAM 						= '<?php echo $hub_webnam ?>'

var GLOBAL_NUMBER_OF_CALLS 				= 0;
	var GLOBAL_LOOP_VALUE 					= 100;
	var GLOBAL_HUB_COUNT					= 0;

var	GLOBAL_MANUAL_FROM_TO_DATE 			= 0;
	var GLOBAL_CHART_STEP_SIZE 				= 20;
	var GLOBAL_DASHBOARD_MIN_VALUE 			= 0;
	var GLOBAL_DASHBOARD_MAX_VALUE 			= 0;

var GLOBAL_DASHBOARD_UPDATE_INTERVAL	= 10000;

var datahub_text0031a 					= 'Next update in'
	var visual_secs_text 					= 'seconds'.toLowerCase();
	var visual_sec_text  					= 'second'.toLowerCase();

var global_sertyp						= '<?php echo $input_hub_sertyp ?>'

if ( global_sertyp == '' ) {
		global_sertyp = '*ALL';
	}

//-----------------------------------------------------------------------------------------

//=============================================================================
	// 1 = Debug is active / 0 = Debug is NOT active
	// All debug does is setting the from/to date to a specefic interval
	//=============================================================================
		var global_debug			= 0;
		var global_debug_from_date	= '2023-08-03 07:00:00';
		var global_debug_to_date	= '2023-08-03 09:00:00';
	//=============================================================================

//=============================================================================
	// Set a base date (now) - always start with 00 seconds
	//=============================================================================
		var baseSec = moment().format("ss");
		var global_baseDate = moment().add(0, 'hours').format("YYYY-MM-DD") + ' ' + moment().subtract(baseSec,'seconds').add(0, 'hours').format("HH:mm") + ':00';

//=============================================================================
	// Used to set "from-date" on chart (wrk_from_date)
	//=============================================================================
		var global_subtract_value 	= 20;
		var global_time_unit 		= 'minutes';
	//=============================================================================

//=============================================================================
	// Misc chart setup
	//=============================================================================
	var	DFT_DISPLAY_PARETO_ON_BAR_CHART 					= 'N';
	var	DFT_DISPLAY_PARETO_ON_BAR_CHART 					= 'Y';
	var	DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME 	= 'Y';
	var	DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART 	= 'Y';

if  ( DFT_DISPLAY_PARETO_ON_BAR_CHART == 'Y' ) {
		var displayPareto = true;
	} else {
		var displayPareto = false;
	}

if  ( DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART == 'Y' ) {
		var dftDisplayLablesOnParetoChartOnBarChart = true;
	} else {
		var dftDisplayLablesOnParetoChartOnBarChart = false;
	}

if  ( DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME == 'Y' ) {
		var dftDisplayTicksOnRightSideBarChartForTime = true;
	} else {
		var dftDisplayTicksOnRightSideBarChartForTime = false;
	}

//-----------------------------------------------------------------------------------------
	// Reset chart objects
	//-----------------------------------------------------------------------------------------
	var chart_bar 		= null;
	var chartPDFname 	= null;
	var chartPDFname 	= GLOBAL_HUB_NAM;

//-----------------------------------------------------------------------------------------
	// Move PHP arrays to javascript
	//-----------------------------------------------------------------------------------------
	var DFT_CANVAS_HEIGHT				 = '<?php echo $DFT_CANVAS_HEIGHT; ?>';

var DFT_DURATIONTIME				 = <?php echo $DFT_DURATIONTIME; ?>;
	var DFT_PIE_TITLE_HEADER_DISPLAY	 = '<?php echo $DFT_PIE_TITLE_HEADER_DISPLAY; ?>';
	var DFT_LEGEND_POSITION_DISPLAY		 = '<?php echo $DFT_LEGEND_POSITION_DISPLAY; ?>';
	var DFT_LEGEND_POSITION				 = '<?php echo $DFT_LEGEND_POSITION; ?>';

var GLOBAL_DASHBOARD_LABEL_TEXT		 = '';
	var GLOBAL_DASHBOARD_LABEL_TEXT_FILE = '';

var HEADER_TEXT						 = '';
	var HEADER_TEXT_FILE				 = '';

var GLOBAL_CHART_STEP_SIZE 			 = 20;
	var GLOBAL_DASHBOARD_MIN_VALUE 		 = 0;
	var GLOBAL_DASHBOARD_MAX_VALUE 		 = 0;

var DFT_SHOW_NEXT_UPDATE_INFO									= 'Y';
	var DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE				= 'N';
	var DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE_ICON_TO_SHOW	= '<i style="color:CornflowerBlue" class="fa-solid fa-1x fa-star fa-spin"></i>';

//-----------------------------------------------------------------------------------------
	// Msic chart setup
	//-----------------------------------------------------------------------------------------

var globalbarData  			= null;
	var globalbarData1 			= null;
	var globalbarColor 			= null;
	var globalbarLabelText 		= null;

//-----------------------------------------------------------------------------------------
	// General chart settings - also look in ready for more settings and hiding
	//-----------------------------------------------------------------------------------------

durationTime = 2000;
	pie_title_header_display = true;
	legend_position			 = 'top';
	legend_position_display	 = true;

//-----------------------------------------------------------------------------------------

var pieData = null;
	var pieColor = null;
	var pieToolTip = null;
	var maxValueBar = 0;

//=============================================================================
// Get data for line 1
//=============================================================================
function getDataLineBurner( get_data_button_pressed )
{

$('#get-data-button-pressed').val( get_data_button_pressed );

// Manuel from/to date to be used
	if (  $('#current-update-status').val() == '*PAUSE-UPDATE' )
	{

// global_debug = 1;
		// global_debug_from_date = show_from_date_time;
		// global_debug_to_date = show_to_date_time;

// $('#input-base-date').val( show_from_date_time );
		// $('#show-from-date-time').val( show_from_date_time );
		// $('#show-to-date-time').val( show_to_date_time );
		// $('#show-to-date-time-real').val( show_to_date_time );

// chart_border_max_to_date	= show_from_date_time;
		// chart_border_max_from_date	= show_to_date_time

GLOBAL_MANUAL_FROM_TO_DATE = 1;
		firstTime = 0;
		// updateChartLine();
		// return;

}

setDefaultFromToDate();
	getDataLine('N');

}

//=============================================================================
// Get data
//=============================================================================
// function getData( dashboard_webservice, overrule_auto_update )
// {

// //console.log('getData');

// firstTime = 0;

// getDataLine( dashboard_webservice, overrule_auto_update );

// }

$('#downloadPdf').removeClass('d-none');

// Show progress indicator
		//$('#progress-indicator').removeClass('bg-light').addClass('bg-success');
		//$('#progress-indicator').html('<i class="fa-sharp fa-light fa-loader fa-spin fa-spin-reverse"></i>');

$('#icon-circle-number-dot').removeClass('text-dark').addClass('text-success');

// Add to counter and save
		GLOBAL_NUMBER_OF_CALLS++;
		$('#number-of-calls').val( GLOBAL_NUMBER_OF_CALLS );
		$('#info-modal-number-of-calls').html( GLOBAL_NUMBER_OF_CALLS );

if ( GLOBAL_NUMBER_OF_CALLS >= GLOBAL_LOOP_VALUE ) {
			setDefaultFromToDate();
			GLOBAL_NUMBER_OF_CALLS = 0;
		}

var dashboard_webservice = dashboard_webservice;
		var fetch_entries = 50;

//=============================================================================
		// Move chart - move only "to" point to make chart look good
		// The from point will be move after 100 data gets
		//=============================================================================

chart_border_max_from_date = $('#show-from-date-time').val();
		chart_border_max_to_date = $('#show-to-date-time').val();

sec_to_add	= 1;

if ( GLOBAL_MANUAL_FROM_TO_DATE != 1 ) {
			sec_to_add	= 60 - moment().format('ss');
			chart_border_max_to_date = moment().add( sec_to_add, 'seconds').format('YYYY-MM-DD HH:mm:ss');
			chart_border_max_to_date_real = moment().add( 0, 'seconds').format('YYYY-MM-DD HH:mm:ss');
		} else {
			chart_border_max_to_date_real = moment().add( 0, 'seconds').format('YYYY-MM-DD HH:mm:ss');
		}

// alert(chart_border_max_from_date)
		// alert(chart_border_max_to_date)

// Set debug
		if ( global_debug == 1) {
			chart_border_max_to_date = global_debug_to_date;
		}

$('#show-to-date-time').val( chart_border_max_to_date );
		$('#show-to-date-time-real').val( chart_border_max_to_date_real );
		$('#sec-to-add').val( sec_to_add );

var show_from_date_time = $('#show-from-date-time').val();
		var show_to_date_time 	= $('#show-to-date-time').val();

// Split from date / time
		var ary_wrk_date = show_from_date_time.split(' ');
		var werbservice_fromdate = ary_wrk_date[0];
		var werbservice_fromtime = ary_wrk_date[1];

// Split to date / time
		var ary_wrk_date = show_to_date_time.split(' ');
		var werbservice_todate = ary_wrk_date[0];
		var werbservice_totime = ary_wrk_date[1];

// Assuming you have two timestamps in string format
		const timestamp1 = show_from_date_time;
		const timestamp2 = show_to_date_time;

// Create moment objects from the timestamps
		const moment1 = moment(timestamp1);
		const moment2 = moment(timestamp2);

// Calculate the difference in hours
		const hoursDiff = moment2.diff(moment1, 'hours');

//			 + '&to_date=' + show_to_date_time

// Create param list
	parmData = '&hub_webnam=' + '<?php echo $hub_webnam ?>'
			 + '&fromdate=' + werbservice_fromdate
			 + '&fromtime=' + werbservice_fromtime
			 + '&todate=' + werbservice_todate
			 + '&totime=' + werbservice_totime
			 + '&get_detail=' + 'Y'
			 + '&get_total=' + 'Y'
 			 + '&rpyPageSize=' + '5250'
			 ;

//alert(parmData)

$.ajax({
		url: "HUB_WEBTRN_maintain_get.php",
		type: "GET",
		data: parmData,
		dataType: "json",
		cache: false,
	beforeSend: function( xhr ) {

}
	})
	.done(function( jsonData ) {

// Header
				var returnCode 				= jsonData.header.returnCode;
				var returnMsg 				= jsonData.header.returnMsg;
				var entries_found 			= jsonData.header.entries_found;
				var table_name_to_use		= jsonData.header.table_name_to_use;
				var response_sec			= jsonData.header.response_sec;

var min_HUB_SECOND			= jsonData.header.min_HUB_SECOND;
				var max_HUB_SECOND			= jsonData.header.max_HUB_SECOND;

var min_HUB_TIMSTP			= jsonData.header.min_HUB_TIMSTP;
				var max_HUB_TIMSTP			= jsonData.header.max_HUB_TIMSTP;

GLOBAL_HUB_COUNT			= jsonData.header.HUB_COUNT;
				GLOBAL_DASHBOARD_MIN_VALUE	= jsonData.header.HUB_CHRMIN;
				GLOBAL_DASHBOARD_MAX_VALUE	= jsonData.header.HUB_CHRMAX;
				GLOBAL_DASHBOARD_HUB_DESCP1	= jsonData.header.HUB_DESCP1;
				GLOBAL_DASHBOARD_HUB_DESCP2	= jsonData.header.HUB_DESCP2;
				GLOBAL_DASHBOARD_HUB_DBGVAL	= jsonData.header.HUB_DBGVAL;

GLOBAL_AVG_HUB_TIME_S		= jsonData.header.avg_HUB_TIME_S;
				GLOBAL_PCT_SUCCESS			= jsonData.header.total_PCT_SUCCESS	;
				GLOBAL_PCT_ERROR			= jsonData.header.total_PCT_ERROR	;
				GLOBAL_TOTAL_ENTRIES		= jsonData.header.total_ENTRIES		;

//=================================================================
				// Update info modal
				//=================================================================
				$('#hub_count-text').html('<?php echo $datahub_text0147 ?>: ' + GLOBAL_HUB_COUNT );
				$('#response-time-text').html( response_sec );

//=================================================================

if ( entries_found == 0 ) {
					dashboard_stamp_local 	= moment().add( 0, 'minutes').format('YYYY-MM-DD HH:mm:ss');
				}

// define chart arrays
				data_data = [];
				data_data01 = [];
				extra_data = [];

//=============================================================================
				// Get data for the chart
				//=============================================================================

var HTMLline01 = '<table>';

$.each( jsonData.data, function( index, object ){

dashboard_stamp 		= object.HUB_TIMSTP;
						dashboard_stamp_local 	= object.HUB_TIMSTP;
					var dashboard_webservice 	= object.HUB_WEBNAM;
					var dashboard_value 		= object.HUB_SECOND;
					var dashboard_text 			= object.HUB_WEBNAM;
					var dashboard_comment		= object.HUB_RPYTXT;
					var dashboard_HUB_RPYCOD	= object.HUB_RPYCOD	;

var color = '';

dashboard_min_value 	= GLOBAL_DASHBOARD_MIN_VALUE;
					dashboard_max_value 	= GLOBAL_DASHBOARD_MAX_VALUE;

// Setup arrays
					data_data.push({x: dashboard_stamp_local, y: dashboard_value});
					data_data01.push({x: dashboard_stamp_local, y: dashboard_value + 5});
					
					extra_data.push({dashboard_stamp_local,dashboard_webservice,dashboard_value,dashboard_text,dashboard_comment,dashboard_min_value,dashboard_max_value,GLOBAL_DASHBOARD_HUB_DESCP1,GLOBAL_DASHBOARD_HUB_DESCP2,dashboard_HUB_RPYCOD});

HTMLline01 +=	'<tr>'
							   +	'<td class="text-left">'
							   +	dashboard_stamp
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    dashboard_webservice
							   +	'</td>'
							   +	'<td class="text-center">'
							   +    dashboard_value
							   +	'</td>'
							   +	'<td>'
							   +    dashboard_comment
							   +	'</td>'
							   +	'</tr>'
							   ;

});

HTMLline01 +=	'</table>'

//=============================================================================
				// Create / Update chart
				//=============================================================================
					 if ( firstTime == 0 ) {
						 createChartLine('Y'); // Create chart
					 } else {
						 updateChartLine(); // Update chart
					 }

// Set flag
					firstTime = 1;
				//=============================================================================

//-----------------------------------------------------------------------
				// Show next update text?
				//-----------------------------------------------------------------------
				if ( DFT_SHOW_NEXT_UPDATE_INFO == 'Y' ) {
					$('.badge-pseodu-class-next-update-info').removeClass('d-none');
				} else {
					$('.badge-pseodu-class-next-update-info').addClass('d-none');
				}

})
	.always(function( jsonData ) {

//console.log('I am always..');

// Remove progress indicator
		//$('#progress-indicator').removeClass('bg-success').addClass('bg-light');
		//$('#progress-indicator').removeClass('bg-success').addClass('bg-light');

$('#icon-circle-number-dot').addClass('text-dark').removeClass('text-success');

if (  $('#current-update-status').val() == '*PAUSE-UPDATE' )
		{

// Scroll
			if ( $('#get-data-button-pressed').val() == '1' ) {
				$('#date-confirm-message').html('Data hentet...');
				scrollToSomething('chart-wrapper');
			}

// Export
			if ( $('#get-data-button-pressed').val() == '2' ) {
				$('#button-export-chart-data').click();
			}

$('#select-from-date').focus();

setTimeout(function(){
				$('#date-confirm-message').html('&nbsp;');
			}, 2000);

}

})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

});

}

//=============================================================================
// Create chart Line 1
//=============================================================================
function createChartLine( adjustMe )
{

// Get some dates
	$HEADER_FROM_DATE = $('#show-from-date-time').val();
	$HEADER_TO_DATE = $('#show-to-date-time').val();

// Set chart header text
	if ( GLOBAL_DASHBOARD_HUB_DESCP1.trim() == '' ) {
		this_is_a_hypen = '';
	} else {
		this_is_a_hypen = ' - ';
	}

HEADER_TEXT 		= GLOBAL_HUB_NAM + this_is_a_hypen + GLOBAL_DASHBOARD_HUB_DESCP1.trim();
	HEADER_TEXT_DATE    = $HEADER_FROM_DATE + ' - ' + $HEADER_TO_DATE;
	HEADER_TEXT_FILE 	= GLOBAL_HUB_NAM;

GLOBAL_DASHBOARD_LABEL_TEXT = '( min: ' + GLOBAL_DASHBOARD_MIN_VALUE + ' sec / max: ' + GLOBAL_DASHBOARD_MAX_VALUE + ' sec / omit > ' + GLOBAL_DASHBOARD_HUB_DBGVAL + ')';
	GLOBAL_DASHBOARD_LABEL_TEXT_FILE = '_min_' + GLOBAL_DASHBOARD_MIN_VALUE + '_sec___max_' + GLOBAL_DASHBOARD_MAX_VALUE + '_sec_';

if ( adjustMe != 'N' ) {
		adjustChart();
	}

//console.log(adjustMe + ' ' + chart_border_max_from_date + ' ' + chart_border_max_to_date);

// Get the canvas element
    var canvas = document.getElementById('chart_01_id');

// Destroy all existing chart instances
    Chart.helpers.each(Chart.instances, function (instance) {
		instance.destroy();
    });

const img = new Image(16, 16);
		img.src = 'images/mini_reeft.png';

const data = {
				datasets: [
				{
					fill: false,
					label: GLOBAL_DASHBOARD_LABEL_TEXT,
					data: data_data,
					borderWidth: 2,
					borderColor: 'black', // Set line color to red
				},
				{
					fill: false,
					label: GLOBAL_DASHBOARD_LABEL_TEXT,
					data: data_data01,
					borderWidth: 2,
					borderColor: 'yellow', // Set line color to red
					pointBackgroundColor: 'blue', // Set point color to purple
					pointBorderColor: 'blue' // Set point border color to purple
					
				}
				]
			}

const footer = (tooltipItems) => {

// console.log(tooltipItems)
		//console.log(extra_data)

// Get the index in order to find extra data
		let idx = tooltipItems[0].dataIndex
		// console.log(idx)

// Now get the extra data from the array object created in getDataLine
		let dashboard_stamp_local 				  = extra_data[idx].dashboard_stamp_local
		let dashboard_text 						  = extra_data[idx].dashboard_text
		let dashboard_webservice 				  = extra_data[idx].dashboard_webservice
		let dashboard_comment					  = extra_data[idx].dashboard_comment
		let dashboard_min_value					  = extra_data[idx].dashboard_min_value
		let dashboard_max_value					  = extra_data[idx].dashboard_max_value
		let dashboard_GLOBAL_DASHBOARD_HUB_DESCP1 = extra_data[idx].GLOBAL_DASHBOARD_HUB_DESCP1
		let dashboard_GLOBAL_DASHBOARD_HUB_DESCP2 = extra_data[idx].GLOBAL_DASHBOARD_HUB_DESCP2
		let dashboard_HUB_RPYCOD				  = extra_data[idx].dashboard_HUB_RPYCOD

//let sum = 0;
		let hhh 	= 'Webservice: ' + dashboard_webservice + "\n"
					+ 'Comment 1: ' + dashboard_GLOBAL_DASHBOARD_HUB_DESCP1 + "\n"
					+ 'Comment 2: ' + dashboard_GLOBAL_DASHBOARD_HUB_DESCP2 + "\n"
					+ 'Comment 3: ' + dashboard_comment + "\n"
					+ 'Comment 4: ' + dashboard_HUB_RPYCOD + "\n"
					+ 'Min value: ' + dashboard_min_value + "\n"
					+ 'Max value: ' + dashboard_max_value + "\n"
					;

return hhh;

// tooltipItems.forEach(function(tooltipItem) {
		// sum += tooltipItem.parsed.y;
		// });
		// return 'Sum: ' + sum;

};

// console.log(chart_border_max_from_date);
	// console.log(chart_border_max_to_date);

$('#some-info-2').html(chart_aspectRatio);

//var ctx = document.getElementById('chart_01_id').getContext('2d');
var ctx = canvas.getContext('2d');
    myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
			responsive: true,
			maintainAspectRatio: true,
			aspectRatio: chart_aspectRatio,
		onClick: function (event, elements) {
			if (elements.length > 0) {

// var index = elements[0].index;

// // Get the data point that was clicked
				// var value1 = myChart.data.datasets[0].data[index].x;
				// var value2 = myChart.data.datasets[0].data[index].y;
				// var modal_label = myChart.data.datasets[0].label;

// // Get pk value from the tool-tip "bubble"
				// var modal_pk_comment 	= event.chart.tooltip.footer[1];
				// var modal_pk 			= event.chart.tooltip.footer[3];
				// var modal_pk_bookmark	= event.chart.tooltip.footer[4];
				// var modal_pk_image		= event.chart.tooltip.footer[5];

// // Split because the pk is in the form pk: value
				// var ary_pk = modal_pk.split(' ');

// myPK = ary_pk[1];

// var ary_wrk = modal_pk_comment.split(':');
				// myPK_comment = ary_wrk[1].trim();

// var ary_wrk = modal_pk_bookmark.split(':');
				// myPK_bookmark = ary_wrk[1].trim();

// console.log('modal:' + myPK_bookmark)

// if ( myPK_bookmark == '<?php echo $datahub_YES ?>' ) {
					// myPK_bookmark = 'Y'
				// }
				// if ( myPK_bookmark == '<?php echo $datahub_NO ?>' ) {
					// myPK_bookmark = 'N'
				// }
				// console.log('modal:' + myPK_bookmark)

// var ary_wrk = modal_pk_image.split(':');
				// myPK_image = ary_wrk[1].trim();

// // Show modal
				// $('#data-change-modal-rowIndex').val('');

// changeComment(myPK, myPK_comment, '*CHART_MODE', myPK_bookmark, myPK_image)

}
		},
		elements: {
			point: {
				radius: function(context) {

var index = context.dataIndex;
						if ( index != undefined ) {
							var nnn = extra_data[index].dashboard_min_value

if ( nnn == 'Y' ) {
								return 8
							}
						}
						return 5;

},
                pointStyle: 'rectRounded', // Set the desired point style
					backgroundColor: function(context) {

var index = context.dataIndex;
						var value = context.dataset.data[index];
						
						console.log(index)
						console.table(value)
						// if (index === context.dataset.data.length - 1) {
							// return 'DarkOrange'; // Set color to forestgreen for the last data point
						// }
						// if (index === context.dataset.data.length - 2) {
							// return 'lightgreen'; // Set color to lightgreen for the last data point
						// }

var index = context.dataIndex;
						if ( index != undefined ) {

var value 	= extra_data[index].dashboard_value
						var min 	= extra_data[index].dashboard_min_value
						var max 	= extra_data[index].dashboard_max_value

if ( parseFloat(value) > parseFloat(max) ) {
							return 'Red'; // Set color to lightgreen for the last data point
						}
						if ( parseFloat(value) < parseFloat(min) ) {
							return 'Green'; // Set color to lightgreen for the last data point
						}

// if ( nnn == 'Y' ) {
							// // console.log(nnn + ' ' + index)
							// // console.log(extra_data)
						// } else {
							// console.log('Noting')
						// }
						}

return 'blue'; // Set color to blue for other data points
					},
			}
		},
            scales: {
                y: {
				afterDataLimits: function(axis) {

},
				beforeDataLimits: function(axis) {
				},
					beginAtZero: true,
				title: {
					display: true,
					text: '<?php echo $datahub_secs_text ?>'
				},

display: true,
                    grid: {
                        display: true
                    }
                },
                x: {
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        unit: 'second',
 			          tooltipFormat:'YYYY-MM-DD HH:mm:ss',
                        displayFormats: {
                            'minute': 'YYYY-MM-DD HH:mm:ss',
							'second': 'YYYY-MM-DD HH:mm:ss',
							'millisecond':'HH:mm:ss',
							'hour': 'HH:mm:ss',
							'day': 'HH:mm:ss',
							'week': 'HH:mm:ss',
							'month': 'HH:mm:ss',
							'quarter': 'HH:mm:ss',
							'year': 'HH:mm:ss'
                        },
                        //stepSize: 120
                        stepSize: GLOBAL_CHART_STEP_SIZE
                    },
						min: chart_border_max_from_date,
						max: chart_border_max_to_date,
						reverse: false,
                    grid: {
                        display: true
                    }
                }
            },
            plugins: {
			title: {
                display: true,
                //text: [HEADER_TEXT + ' ' +  GLOBAL_DASHBOARD_LABEL_TEXT ],  // One line
                text: [HEADER_TEXT , HEADER_TEXT_DATE ],  // If you want a line break create an array ['text','text1'] instead
				color: 'black',
				position: 'top',
				align: 'center',
				font: {
                        size: 25,
						style: 'normal',
						weight: 'bold'
                    },
                padding: {
                    top: 5,
                    bottom: 5
                }
                },
				subtitle: {
                display: true,
                text: GLOBAL_DASHBOARD_LABEL_TEXT,
				color: 'black',
				font: {
                        size: 20,
						style: 'normal',
						weight: 'bold'
                    },
                padding: {
                    top: 5,
                    bottom: 15
                }
            },
			annotation: {
                annotations: [
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y',
                        value: GLOBAL_DASHBOARD_MIN_VALUE, // Specify the minimum value
                        borderColor: 'tomato',
                        borderWidth: 2,
                        borderDash: [4, 5], // Set the line to dashed
                        label: {
                            enabled: true,
                            position: 'left',
                            content: 'Min Value' // Optional label for the line
                        }
                    },
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y',
                        value: GLOBAL_DASHBOARD_MAX_VALUE, // Specify the maximum value
                        borderColor: 'tomato',
                        borderWidth: 2,
                        borderDash: [4, 5], // Set the line to dashed
                        label: {
                            enabled: true,
                            position: 'right',
                            content: 'Max Value' // Optional label for the line
                        }
                    },
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y',
                        value: 13, // Specify the maximum value
                        borderColor: 'blue',
                        borderWidth: 2,
                        borderDash: [4, 5], // Set the line to dashed
                        label: {
                            enabled: true,
                            position: 'right',
                            content: 'Max Value' // Optional label for the line
                        }
                    },
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y',
                        value: 10, // Specify the maximum value
                        borderColor: 'orange',
                        borderWidth: 2,
                        borderDash: [4, 5], // Set the line to dashed
                        label: {
                            enabled: true,
                            position: 'right',
                            content: 'Max Value' // Optional label for the line
                        }
                    }
                ]
            },
				legend: {
					display: false,
					labels: {
						color: 'black'
					}
				},
				tooltip: {
					callbacks: {
						footer: footer,
					 }
				},
				zoom: {
						pan:
						{
							 enabled: true,
							 mode: 'xy',

//modifierKey: 'ctrl',
							// overScaleMode: 'xy',
							// Function called while the user is panning
							onPan: function({chart}) {
								//console.log('I m panning!!!');
								pauseUpdate();
							},
							// Function called once panning is completed
							onPanComplete: function({chart}) {
								//console.log('I was panned!!!');
							}
						},
                       zoom: {
                           wheel: {
                               enabled: true,
							   modifierKey: 'ctrl'
                           },
							// Function called while the user is zooming
							onZoom: function({chart})
							{
								//console.log('Im zooming!!!');
								pauseUpdate();
							},
							// Function called once zooming is completed
							onZoomComplete: function({chart})
							{
								//console.log('I was zoomed!!!');
							}

},
                           pinch: {
                               enabled: true
                           },
                           mode: 'x'
                   }
            }
        }
    });

// Debug
	chart_w = $('#chart_01_id').width();
	chart_h = $('#chart_01_id').height();
	$('#some-info').text(chart_w + ' ' + chart_w);

}

//=============================================================================
// Set from/to date
//=============================================================================
function toggleFromToDate()
{

var select_from_date = moment().subtract(2, 'hour').format("YYYY-MM-DD");
	var select_from_time = moment().subtract(4, 'hour').format("HH:mm:ss");

var select_to_date = moment().add(10, 'minutes').format("YYYY-MM-DD");
	var select_to_time = moment().add(10, 'minutes').format("HH:mm:ss");

//console.log(select_from_date + ' ' + select_from_time)

$('#select-from-date').val( select_from_date ).focus();
	$('#select-from-time').val( select_from_time );

$('#select-to-date').val( select_to_date );
	$('#select-to-time').val( select_to_time );

if ( $('#from-to-date-wrapper').hasClass('d-none') ) {
		$('#from-to-date-wrapper').removeClass('d-none');
		$('#button-toggle-from-to-date').addClass('d-none');

// Place cursor
		$('#select-from-date').focus();

pauseUpdate();
	} else {
		$('#from-to-date-wrapper').addClass('d-none');
		unPauseUpdate();
	}

}

//=============================================================================
// Adjust chart - use aspectRatio to control it instead of mugging around wiht
// the canvas as it works like shite
//=============================================================================
function adjustChart()
{

var w_width = $(window).width();
	var w_height = $(window).height();

var v_value	 = 1600;
	var v_value1 = 1000;
	var v_value2 = 800;
	var base_chart_aspectRatio = 3;

if ( w_width < v_value2 ) {
		var base_chart_aspectRatio = 1;
		$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio + ' (a)');
	}
	else if ( w_width < v_value1 ) {
		var base_chart_aspectRatio = 2;
		$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio + ' (a)');
	}
	else if ( w_width < v_value ) {
		var base_chart_aspectRatio = 3;
		$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio) + ' (b)';
	}
	else {
		var base_chart_aspectRatio = 4;
		$('#some-info-1').html(w_width + ' ' + w_height + ' >' + v_value + ' ' + base_chart_aspectRatio + ' (c)');

}

//$('#some-info-1').html(w_width + ' ' + w_height + ' >' + v_value + ' ' + base_chart_aspectRatio + ' (d)');
	chart_aspectRatio = base_chart_aspectRatio;

}

//console.log('Update chart' + moment() );

myChart.data.datasets[0].data = data_data;
	myChart.data.datasets[1].data = data_data01;
	myChart.options.aspectRatio = 1;
	myChart.options.scales.x.min = chart_border_max_from_date;
	myChart.options.scales.x.max = chart_border_max_to_date;

myChart.options.plugins.annotation.annotations[0].value = GLOBAL_DASHBOARD_MIN_VALUE;
	myChart.options.plugins.annotation.annotations[1].value = GLOBAL_DASHBOARD_MAX_VALUE;

myChart.update();

}

//=============================================================================
// Pause update
//=============================================================================
function pauseUpdate()
{

$('#current-update-status').val('*PAUSE-UPDATE');
	$('#current-update-status-wrapper').removeClass('d-none');
	$('#next-update-info-wrapper').addClass('d-none');
	$('#current-update-status-text').html('<?php echo $datahub_text0318 ?>');

}

//=============================================================================
// unpause update
//=============================================================================
function unPauseUpdate()
{

console.log('Unpause');

$('#current-update-status').val('*UPDATE');
	$('#current-update-status-wrapper').addClass('d-none');
	$('#next-update-info-wrapper').removeClass('d-none');
	$('#current-update-status-text').html('');

$('#input-base-date').val( global_baseDate );
	$('#show-to-date-time').val( global_baseDate );

GLOBAL_MANUAL_FROM_TO_DATE 	= 0;
	GLOBAL_CHART_STEP_SIZE 		= 10;
	firstTime = 0;

//setDefaultFromToDate();

// Reset chart
	resetChart();

getDataLineBurner('0');

// Hide from/to date
	$('#from-to-date-wrapper').addClass('d-none');
	$('#button-toggle-from-to-date').removeClass('d-none');

}

//=============================================================================
// Set datatables
//=============================================================================
function setDataTablesReason()
{

$('#REEFTvisual_data').DataTable({
        "responsive": true,
		"fixedHeader": false,
		"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
		"iDisplayLength": 25,
        "processing": true,
		"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
        "order": [[ 1, "desc" ]],
		"columnDefs": [
				{
				"targets": [ 3 ],
				"visible": true,
				"searchable": false,
				 "orderable": false
				}

],
		"language":
		{

"sProcessing":   "<?php echo $datahub_datatable_Processing ?>",
					"sLengthMenu":   "<?php echo $datahub_datatable_LengthMenu ?>",
					"sZeroRecords":  "<?php echo $datahub_datatable_ZeroRecords ?>",
					"sInfo":         "<?php echo $datahub_datatable_Info ?>",
					"sInfoEmpty":    "<?php echo $datahub_datatable_InfoEmpty ?>",
					"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
					"sInfoPostFix":  "<?php echo $datahub_datatable_InfoPostFix ?>",
					"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
					"sSearch":       "<?php echo $datahub_datatable_Search ?>",
					"sUrl":          "<?php echo $datahub_datatable_Url ?>",
					"oPaginate": {
						"sFirst":    "<?php echo $datahub_datatable_First ?>",
						"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
						"sNext":     "<?php echo $datahub_datatable_Next ?>",
						"sLast":     "<?php echo $datahub_datatable_Last ?>"
					}
		},
        "rowCallback": function(row, data, index)
		{

},
        "preDrawCallback": function(settings)
		{
		},
		"initComplete": function ()
		{

},
		"buttons": 	[
					{
						title: 'REEFTvisual_data_PDF',
						extend: 'pdf',
						text: '<img src="images/pdf_logo.png" height="25"> PDF',
						orientation: 'landscape',
						exportOptions: {
						modifier: {
							page: 'all'
							}
						}
					},
					{
						title: 'REEFTvisual_data_Excel',
						extend: 'excel',
						text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
						},
						{
						extend: 'copy',
						text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
						}
					]
    });

// Set header

$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');

}

//=============================================================================
// Log off
//=============================================================================
function signoff()
{

window.location.href = "logout.php";

}

//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{

window.location.href = url;

}

//=============================================================================
// Set default date
//=============================================================================
function setDefaultDate( defaultHours ) {

// Set default from/to date
	default_fromDate 	= moment().subtract(defaultHours, 'hours').format("YYYY-MM-DD HH:mm");

$('#fromdate').datetimepicker('date', default_fromDate );
	$('#fromdateX').addClass('animated pulse border border-danger rounded');

// After animation
	$('#fromdateX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

function() {
				$('#fromdateX').removeClass( 'animated pulse border border-danger rounded' );
		}

);

default_toDate 	= moment().add(0, 'days').add(10, 'minutes').subtract(0, 'year').format("YYYY-MM-DD HH:mm");
	$('#todate').datetimepicker('date', default_toDate );

$('#fromdate').datetimepicker('date', default_fromDate );
	$('#fromdateX').addClass('animated pulse border border-danger rounded');

$('#todate').datetimepicker('date', default_toDate );

}

//=============================================================================
// Scroll to something
//=============================================================================
function scrollToSomething( target )
{

thisID = '#' + target;
	$.scrollTo( thisID, 1000);

}

//=============================================================================
// Create PDF
//=============================================================================
function downloadPDF() {

// Get size of report page
	var reportPageHeight = $('#canvas-wrapper').innerHeight();
	var reportPageWidth = $('#canvas-wrapper').innerWidth();

console.log(reportPageHeight + ' ' + reportPageWidth);

// Create a new canvas object that we will populate with all other canvas objects
	var pdfCanvas = $('<canvas />').attr({
		id: "canvaspdf",
		width: reportPageWidth,
		height: reportPageHeight
	});

// Keep track canvas position
	var pdfctx = $(pdfCanvas)[0].getContext('2d');
	var pdfctxX = 0;
	var pdfctxY = 0;
	var buffer = 100;

// For each chart.js chart
	$("canvas").each(function(index) {

// Get the chart height/width
		var canvasHeight = $(this).innerHeight();
		var canvasWidth = $(this).innerWidth();

// Draw the chart into the new canvas
		pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
		pdfctxX += canvasWidth + buffer;

// Our report page is in a grid pattern so replicate that in the new canvas
		if (index % 2 === 1) {
			pdfctxX = 0;
			pdfctxY += canvasHeight + buffer;
		}

});

// Create new pdf and add our new canvas as an image
	var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
	pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);

// download the pdf
	pdf.save(chartPDFname);

}

//=============================================================================
// Set Default dates
//=============================================================================
function setDefaultFromToDate()
{

var baseDate = $('#show-to-date-time').val();

//=============================================================================
	// From date - if global_debug = 1 - we are using the global debug dates
	//=============================================================================
		if ( global_debug == 1 ) {
			$('#show-from-date-time').val( global_debug_from_date );
			$('#show-to-date-time').val( global_debug_to_date );
			$('#input-base-date').val( global_debug_from_date );
		} else {
			wrk_from_date = moment( baseDate ).subtract(global_subtract_value, global_time_unit).format("YYYY-MM-DD HH:mm:ss");

$('#show-from-date-time').val( wrk_from_date );
			$('#input-base-date').val( wrk_from_date );
		}

//alert(baseDate + ' ' + wrk_from_date + ' ' + wrk_from_date)
		//alert(GLOBAL_MANUAL_FROM_TO_DATE)

//console.log('show_to_date_time: ' + GLOBAL_MANUAL_FROM_TO_DATE);
		if ( GLOBAL_MANUAL_FROM_TO_DATE == 1 ) {

var select_from_date = $('#select-from-date').val();
			var select_from_time = $('#select-from-time').val();

var select_to_date = $('#select-to-date').val();
			var select_to_time = $('#select-to-time').val();

select_from_date_time = select_from_date + ' ' + select_from_time;
			select_to_date_time 	= select_to_date + ' ' + select_to_time;

//alert(select_from_date_time)

$('#show-from-date-time').val( select_from_date_time );
			$('#show-to-date-time').val( select_to_date_time );
			$('#input-base-date').val( select_from_date_time );

// Assuming you have two timestamps in string format
			const timestamp1 = select_from_date_time;
			const timestamp2 = select_to_date_time;

// Create moment objects from the timestamps
			const moment1 = moment(timestamp1);
			const moment2 = moment(timestamp2);

// Calculate the difference in hours
			const hoursDiff = moment2.diff(moment1, 'hours');

var step = hoursDiff / 20

step = parseInt(step);

if ( step < 10 ) {
				step = 20;
			}

console.log(hoursDiff + ' ' + step);

if ( hoursDiff > 1000 )
			{
				GLOBAL_CHART_STEP_SIZE = 1500;
			}
			else if ( hoursDiff > 500 )
			{
				GLOBAL_CHART_STEP_SIZE = 300;
			}
			else if ( hoursDiff > 24 )
			{
				GLOBAL_CHART_STEP_SIZE = 200;
			} else {
				GLOBAL_CHART_STEP_SIZE = 20;
			}

GLOBAL_CHART_STEP_SIZE = step;

console.log('select_to_date_time: ' + GLOBAL_MANUAL_FROM_TO_DATE + ' ' + select_from_date_time + ' -- ' + select_to_date_time + ' ' + hoursDiff );
			return;

}

// $('#info-modal-show-from-date-time').html( $('#show-from-date-time').val() );
		// $('#info-modal-show-to-date-time').html( $('#show-to-date-time').val() );

//=============================================================================
	// To date (Add 10 seconds for good ol' sake)
	//=============================================================================
		// wrk_to_date = moment( baseDate ).add(0, 'days').add(0, 'seconds').add(0, 'minutes').subtract(0, 'hours').format("YYYY-MM-DD HH:mm:ss");
		// $('#show-to-date-time').val( wrk_to_date );

}

//=============================================================================
// Make first letter uppercase
//=============================================================================
function capitalizeFirstLetter(string) {

return string.charAt(0).toUpperCase() + string.slice(1);

}

//=============================================================================
// Reset messasge
//=============================================================================
function resetMessage()
{

$('#message-text').html('').removeClass('border border-danger rounded font-weight-bold mt-2 mb-1 p-2');

}

//=============================================================================
// Reset chart
//=============================================================================
function resetChart()
{

myChart.resetZoom();

}

//=============================================================================
// Full screen popup
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{

var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

if ( parseInt(v1_w) > 1800 ) {
		v1_w = 1800;
		v1_h = v1_h - 200;
		v1_center = v1_w/0.8;
	}

// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

var winname = 'win_' + url;

params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3)
{

var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

// Get 25%
	v1_w_pct = v1_w * 0.18;

v1_w_new = v1_w - v1_w_pct;

if ( v1_w_new < 1 ) {
		v1_w_new	= 1800;
	}

v1_w = v1_w_new;
	v1_h = v1_h - 200;
	v1_center = v1_w/0.8;

// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

var winname = 'win_' + url;

params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

// Create URL
	url = url + '?webnam=' + p1 + '&input_hub_sertyp=' + p3;

if ( p2 == 'new-tab' ) {
		overview_win = window.open(url,winname);
	} else {
		overview_win = window.open(url,winname, params);
	}

if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// Set search word
//=============================================================================
function setSearchWord( input_search, input_goto, input_button_number, input_totalPages, input_count )
{

// Set webserver type
	$('#input-HUB_SERTYP').val( input_search );

chart_bar.destroy();

}

//=============================================================================
// Show transcations
//=============================================================================
function showTranscations(url, p1, p2, p3)
{

var url = 'hub_webtrn_maintain.php';
	var p1  = p1;
	var p2  = 'new-win';
	var p3  = '';

popUpCenterBig(url, p1, p2, p3);

}

//=============================================================================
// Save chart to table
//=============================================================================
function saveChartToTable()
{

console.time('A');

var table = $('#REEFTvisual_chart_data').DataTable();

table
    .clear()
    .search('')
    .draw();

console.timeEnd('A');

// Set modal header
	$('#chartDataModalLabel').html( $('#general-header-for-this-screen').html() ).addClass('h4');

console.time('B');

$.each( extra_data, function( index, object ){

let dashboard_webservice	= extra_data[index].dashboard_webservice;
		let dashboard_stamp_local 	= extra_data[index].dashboard_stamp_local;
		let dashboard_value 		= extra_data[index].dashboard_value;
		let dashboard_text 			= extra_data[index].dashboard_text;
		let dashboard_type 			= extra_data[index].dashboard_type;
		let dashboard_comment		= extra_data[index].dashboard_comment;
		let dashboard_HUB_RPYCOD	= extra_data[index].dashboard_HUB_RPYCOD;

value_type = '';

if ( dashboard_HUB_RPYCOD == '' ) {
			dashboard_HUB_RPYCOD = '*ERROR';
		}

// Alles ist gut
		value_type_text = '<div class="text-center"><i class="fa-regular fa-circle-check"></i></div>'
		value_type = '<div class="d-none">ok</div>'

value_button = ''
		value_button = ''

if ( dashboard_value < GLOBAL_DASHBOARD_MIN_VALUE )
		{
			value_type_text = '<div class="text-center"><i title="Low" class="text-success fa-regular fa-thumbs-up"></i></div>'
			value_type = '<div class="d-none">low</div>'
		}

if ( dashboard_value > GLOBAL_DASHBOARD_MAX_VALUE )
		{
			value_type_text = '<div class="text-center"><i title="High" class="text-danger fa-regular fa-thumbs-down"></i></div>'
			value_type = '<div class="d-none">high</div>'
		}

var table = $('#REEFTvisual_chart_data').DataTable();

var rowData = [dashboard_webservice, dashboard_stamp_local, dashboard_value, value_type_text + value_type,dashboard_comment,dashboard_HUB_RPYCOD];

table.row.add(rowData);

});

table.draw();

console.timeEnd('B');
	console.time('C');

$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i>');

// Hide search tip
	$('#modal-search-tip').addClass('d-none');

$('#chartDataModal').modal('show');

$('#chartDataModal').on('shown.bs.modal', function () {
		$('div.dataTables_filter input', table.table().container()).focus();
	})

console.timeEnd('C');
	console.time('D');

var table = $('#REEFTvisual_chart_data').DataTable();

$('#REEFTvisual_chart_data tbody').on( 'click', 'tr', function () {

rr = table.row( this ).index();

console.log(rr);

var data = table.row( this ).data();
		//console.log(data);
		$('#data-change-modal-rowIndex').val(rr);

});

// // Create the caption

// // Number of calls
	// var m1 = $('#hub_count-text').text();
	// var m2 = GLOBAL_AVG_HUB_TIME_S;

// var myCaption = m1
				  // + '<br>--'
				  // + 'Avg call time: ' + GLOBAL_AVG_HUB_TIME_S
				  // ;

// $('#REEFTvisual_chart_data caption').html( myCaption );

console.timeEnd('D');

}

//=============================================================================
// Set datatables - full chart
//=============================================================================
function setDataTablesFullChart()
{

DFT_EXPORT_TO_CSV = 'Y';
	DFT_EXPORT_TO_CSV_FIELDSEPARATOR = ';';

$('#REEFTvisual_chart_data').DataTable({
        "order": [[ 1, "desc" ]],
		"columnDefs": [
				{
				"targets": [ 3 ],
				"visible": true,
				"searchable": true,
				 "orderable": false
				}

],
		pageLength: 10,
		lengthChange: true,
		layout: {
			top1Start: [{
				pageLength: {
						menu: [5,10, 25, 50, 100, 250]
					}

}],
			top1End: [{
				search: {
					placeholder: '<?php echo $datahub_datatable_Search_text ?>',
					processing: true
				}

}],
			topStart: {
				info:{
					 }
			},
			topEnd: {
				paging: {
					buttons: 7,
					firstLast: true,
					boundaryNumbers: true,
				}
			},
			bottomStart: {
				buttons: [
					{
						extend: 'copyHtml5',
						text: '<img src="images/copy.png" height="25"> Copy to Clipboard',
						title: function(){
							var myFileName = setFileNameAndTitle('*TITLE');
						return myFileName;
						},
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
							columns: [0,1,2,3,4,5]
						}

},
					{
						extend: 'excelHtml5',
						filename: function(){
							var myFileName = setFileNameAndTitle('*FILE');
						return myFileName;
						},
						title: function(){
							var myFileName = setFileNameAndTitle('*TITLE');
						return myFileName;
						},
						text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel',
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
							columns: [0,1,2,3,4,5]
						}
					},
					{
						extend: 'pdfHtml5',
						text: '<img src="images/pdf_logo.png" height="25"> PDF',
						orientation: 'landscape',
						filename: function(){
							var myFileName = setFileNameAndTitle('*FILE');
						return myFileName;
						},
						title: function(){
							var myFileName = setFileNameAndTitle('*TITLE');
						return myFileName;
						},
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
						columns: [0,1,2,3,4,5],
						modifier: {
							page: 'all'
							}
						}
					}
				]
			},
			bottomEnd: {
				paging: {
					buttons: 7,
					firstLast: true,
					boundaryNumbers: true
				}
			}
		},
		"language":
		{
					"decimal":        ",",
					"thousands":      ".",
					"emptyTable":     "<?php echo $datahub_datatable_emptyTable ?>",
					"info":           "<?php echo $datahub_datatable_Info ?>",
					"infoEmpty":      "<?php echo $datahub_datatable_InfoEmpty ?>",
					"InfoFiltered":   "<?php echo $datahub_datatable_InfoFiltered ?>",
					"infoPostFix":    "",
					"lengthMenu":     "<?php echo $datahub_datatable_LengthMenu ?>",
					"loadingRecords": "",
					"processing":     "<?php echo $datahub_datatable_Processing ?>",
					"search":         "<?php echo $datahub_datatable_Search ?>",
					"zeroRecords":    "<?php echo $datahub_datatable_ZeroRecords ?>",
					"paginate":
						{
							"first":    "<?php echo $datahub_datatable_First ?>",
							"last":     "<?php echo $datahub_datatable_Last ?>",
							"next":     "<?php echo $datahub_datatable_Next ?>",
							"previous": "<?php echo $datahub_datatable_Previous ?>"
						},
					"aria": {
						"orderable":  "Order by this column",
						"orderableReverse": "Reverse order this column"
					}
		},
        "rowCallback": function(row, data, index)
		{

},
        "preDrawCallback": function(settings)
		{
		},
		"initComplete": function ()
		{

},
		"buttons": 	[
						{
							extend: 'pdf',
							title: 'REEFTvisual_chart_data_PDF ',
							text: '<img src="images/pdf_logo.png" height="25"> PDF',
							orientation: 'landscape',
							filename: function(){
								var myFileName = setFileNameAndTitle('*FILE');
							return myFileName;
							},
							title: function(){
								var myFileName = setFileNameAndTitle('*TITLE');
							return myFileName;
							},
							exportOptions: {
							columns: [0,1,2,3,4,5],
							modifier: {
								page: 'all'
								}
							}
						},
						{
							extend: 'excel',
							exportOptions: {
								// Fields to export (https://datatables.net/reference/button/csv#Examples)
								columns: [0,1,2,3,4,5]
							},
							filename: function(){
								var myFileName = setFileNameAndTitle('*FILE');
							return myFileName;
							},
							title: function(){
								var myFileName = setFileNameAndTitle('*TITLE');
							return myFileName;
							},
							text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
						},
						{
							extend: 'copy',
							exportOptions: {
								// Fields to export (https://datatables.net/reference/button/csv#Examples)
								columns: [0,1,2,3,4,5]
							},
							text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
						},
						{
							extend: 'csv',
							className: 'datatables_csv_button',
							exportOptions: {
								// Fields to export (https://datatables.net/reference/button/csv#Examples)
								columns: [0,1,2,3,4,5]
							},
							bom: true,
							header: true,
							filename: function(){

var myFileName = setFileNameAndTitle('*FILE');

return myFileName;
							},
							fieldSeparator: DFT_EXPORT_TO_CSV_FIELDSEPARATOR,
							text: '<img src="images/csv_logo.png" height="25"> CSV file'
						}
					]
    });

// Export to CSV active?
	// I have to reverse it due the nature of datatables
	// Note the class name is added under the extend: 'csv'

if ( DFT_EXPORT_TO_CSV == 'N' ) {
		$('.datatables_csv_button').addClass('d-none');
	}
	//$('.datatables_csv_button').addClass('d-none');

}

//=============================================================================
// Set file name and title
//=============================================================================
function setFileNameAndTitle( action ) {

var myTime 		= moment().format('DDMMYYYY_HHmmss');

if ( action == '*FILE' ) {
		var myFileName 	= HEADER_TEXT_FILE + '_' + GLOBAL_DASHBOARD_LABEL_TEXT_FILE + '_' + myTime;
	} else {
		var myFileName 	= HEADER_TEXT
						+ ' '
						+ GLOBAL_DASHBOARD_LABEL_TEXT
						+ ' / Avg call time: '
						+ GLOBAL_AVG_HUB_TIME_S
						+ ' / Success call: '
						+ GLOBAL_PCT_SUCCESS
						+ '% / Error call: '
						+ GLOBAL_PCT_ERROR
						+ '% / Total calls: '
						+ GLOBAL_TOTAL_ENTRIES
						;
	}

return myFileName;

}

//=============================================================================
// Show search tip
//=============================================================================
function showSearchTip()
{

// Help text in modal table export
	var datahub_text0314 = '<?php echo $datahub_text0314 ?>';
	var datahub_text0315 = '<?php echo $datahub_text0315 ?>';
	var datahub_text0316 = '<?php echo $datahub_text0316 ?>';

// min
	datahub_text0314 = datahub_text0314.replace("%1",GLOBAL_DASHBOARD_MIN_VALUE );
	// max
	datahub_text0315 = datahub_text0315.replace("%1",GLOBAL_DASHBOARD_MAX_VALUE );
	// range
	datahub_text0316 = datahub_text0316.replace("%1",GLOBAL_DASHBOARD_MIN_VALUE );
	datahub_text0316 = datahub_text0316.replace("%2",GLOBAL_DASHBOARD_MAX_VALUE );

$('#msg_datahub_text0314').html( datahub_text0314 );
	$('#msg_datahub_text0315').html( datahub_text0315 );
	$('#msg_datahub_text0316').html( datahub_text0316 );

// Save element in variable
		var obj = $('#modal-search-tip');

if ( obj.hasClass('d-none') ) {

console.log('s1');

obj.removeClass('d-none');

const element = document.querySelector('#modal-search-tip');
			element.classList.add('animate__animated', 'animate__backInDown');

element.addEventListener('animationend', () => {
				obj.removeClass('animate__animated animate__backInDown');
				$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb-on" style="--fa-primary-color: blue; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0"></i>');
				obj.removeClass('d-none');
			});

} else {

console.log('s2');
			const element = document.querySelector('#modal-search-tip');
			element.classList.add('animate__animated', 'animate__backOutUp');

element.addEventListener('animationend', () => {
				obj.addClass('d-none');
				obj.removeClass('animate__animated animate__backOutUp');
				$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i>');
			});

}

//=============================================================================
// Set clock
//=============================================================================
function updateClock() {

$('#current-time').html(moment().format('DD-MM-YYYY HH:mm:ss'));

var current_update_status = $('#current-update-status').val();

if ( current_update_status == '*UPDATE')
	{

//console.log('I am updating - ' + moment());

// Set interval and get data when nessecery - do this instead of setting a timer
	var interval_workfield = $('#interval-counter').val();
	var interval_workfield_base = $('#interval-counter-base').val();

// make it h:m:s
	seconds = interval_workfield;

const hours = Math.floor(seconds / 3600);
	const minutes = Math.floor((seconds % 3600) / 60);
	const remainingSeconds = seconds % 60;

const formattedHours 	= String(hours).padStart(2, '0');
	const formattedMinutes 	= String(minutes).padStart(2, '0');
	const formattedSeconds 	= String(remainingSeconds).padStart(2, '0');
	const formattedSecondss	= remainingSeconds;

const formattedTime 	= formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;
	if ( interval_workfield_base < 60 ) {

// Making is so fvcking perfect...
		if ( formattedSeconds == 1 ) {
			visual_secs_text_text = visual_sec_text + '&nbsp;';
		} else {
			visual_secs_text_text = visual_secs_text;
		}
		var formattedTimeText = datahub_text0031a + ' ' + formattedSecondss + ' ' + visual_secs_text_text;

} else {
		var formattedTimeText = datahub_text0031a + ' '  + formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;
	}

// Next counter
	interval_workfield = parseInt(interval_workfield) - 1;

if ( interval_workfield == 0 ) {
		$('#interval-counter').val( $('#interval-counter-base').val() );

// Show update icon
		if ( DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE == 'Y') {
			$('#interval-next-update-text').html( DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE_ICON_TO_SHOW);
		} else {
			$('#interval-next-update-text').html( '&nbsp;' );
		}

//========================================================
		// Get data - if wanted
		//========================================================
		if ( $('#current-update-status').val() == '*UPDATE' ) {
			//console.log('Update ' + moment().format('DD-MM-YYYY HH:mm:ss'));
			getDataLine('N');
		} else {
			console.log('No update ' + moment().format('DD-MM-YYYY HH:mm:ss'));
		}
		//========================================================

} else {
		$('#interval-next-update-text').html( '' );
		$('#interval-counter').val(interval_workfield);
	}

$('#interval-next-update').html( formattedTimeText ).prop('title','Format: h:m:s -- seconds is: ' + interval_workfield);

} else {
		//console.log('I am not updating - ' + moment());
	}

}

//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{

setDataTablesFullChart();

$('#current-update-status').val('*UPDATE');

// Set webserver type
	$('#input-HUB_SERTYP').val( global_sertyp );

$('#input-userid').html('');

$('#input-value-min').val(GLOBAL_DASHBOARD_MIN_VALUE);
	$('#input-value-max').val(GLOBAL_DASHBOARD_MAX_VALUE);

$('#input-timer-value').val(GLOBAL_DASHBOARD_UPDATE_INTERVAL);
	$('#input-loop-value').val( GLOBAL_LOOP_VALUE );

$('#info-modal-timer-value').html( GLOBAL_DASHBOARD_UPDATE_INTERVAL );
	$('#info-modal-loop-value').html( GLOBAL_LOOP_VALUE );

var baseDate = global_baseDate;

$('#input-base-date').val( global_baseDate );
	$('#show-to-date-time').val( global_baseDate );

//alert(global_baseDate);

// Get timer value
	var input_timer_value = parseInt( $('#input-timer-value').val() );

if ( isNaN(input_timer_value) ) {
		input_timer_value = 10000;
	}

setDefaultFromToDate();

// Set size of canvas
	$('#canvas-wrapper').css('height','650px');

// Set input fields
	$('#fromdate').val('<?php echo $fromDate ?>');
	$('#todate').val('<?php echo $toDate ?>');

//=============================================================================
	// Set interval values and calculate to seconds/minutes
	//=============================================================================
		// Make it seconds
		sec_calc = parseInt(GLOBAL_DASHBOARD_UPDATE_INTERVAL / 1000);

// Just in case - default 5 sec
		if ( sec_calc < 1 ) {
			sec_calc = 5;
		}

// Make integer from float - just in case
		sec_calc = parseInt(sec_calc);

// Update control fields
		$('#interval-counter-base').val(sec_calc);
		$('#interval-counter').val(sec_calc);
	//=============================================================================

//-----------------------------------------------------------------------
	// Start the clock
	//-----------------------------------------------------------------------
		updateClock();
		setInterval(function() {
			updateClock();
		}, 1000);
	//-----------------------------------------------------------------------

//-----------------------------------------------------------------------
	// Set font awesome icon type
	//-----------------------------------------------------------------------
		// Value is from config/config.php
		var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
		setFontAwesomeIconType( iconType );
	//-----------------------------------------------------------------------

//-----------------------------------------------------------------------
	// Get some chart data
	//-----------------------------------------------------------------------
	getDataLine('Y');

// Set short cuts
	shortcut.add("Esc",function() {
		//window.close();
	});

// Export chart data
	shortcut.add("F2",function() {
		$('#button-export-chart-data').trigger('click');

});

// Register the plugin to all charts:
	//Chart.register(ChartDataLabels);

});
// -->
</script>

</head>

<body>

Base date
	<input class="d-noneX" type="text" id="input-base-date">

<p></p>
	<p></p>
	time unit
	<input class="d-noneX" type="text" id="input-time-unit">
	<p></p>
	subtract value
	<input class="d-noneX" type="text" id="input-subtract-value">
	<p></p>
	time unit for moving chart
	<input class="d-noneX" type="text" id="input-time-unit-move-chart">
	<p></p>
	How much to move the chart
	<input class="d-noneX" type="text" id="input-value-to-move-chart">
	<p></p>
	Min value (red)
	<input class="d-noneX" type="text" id="input-value-min">
	<p></p>
	Max value (green)
	<input class="d-noneX" type="text" id="input-value-max">
	<p></p>

</div>

<div class="row">
			<div class="col-2">
				<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
			</div>
			<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
				<i title="<?php echo $session_rand ?>" class="font-awesome-pseudo-class fa-thin fa-clock"></i>&nbsp;&nbsp;<span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
			</div>
			<div class="col-2 text-right">
				<div id="home-button" class="btn btn-primary" onclick="window.close()" title="<?php echo $datahub_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
			</div>
		</div>

</div>

</div>
			</div>
				<div id="from-to-date-wrapper" class="d-none mb-2 border border-dark p-2">

<div>
				<div class="row">
					<div class="col-6 text-left">
						<button type="button" class="btn btn-primary" onclick="saveChartToTable()" id="button-export-chart-data"><?php echo $datahub_button_save_data_to_table ?></button>
					</div>
					<div class="col-6 text-right">
						<button class="btn btn-primary d-none" onclick="downloadPDF()" id="downloadPdf">Download PDF</button>
					</div>
				</div>

</div>

<div class="card-body" id="table-header-data">

</div>

<div class="card-body">
			<div id="data-result-trans"></div>
		</div>

</div>

<div class="col-2 div-spreder">
	</div>

</div>

<div id="error-text-wrapper" class="d-none">
	<div class="border border-danger rounded p-2 bg-light" id="error-text-ajax-call"></div>
	</div>

</div>

<span id="footer-id">
<?php
	include "include/footer.php";
?>
</span>

<button type="button" class="d-none close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>

<div onclick="showSearchTip()" title="<?php echo $datahub_text0223 ?>" id="modal-lightbulb"><i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i></div>

</div>
      <div class="modal-body">

<div id="modal-search-tip" class="d-none border border-primary p-2 rounded mb-3">
					<div><small id="msg_datahub_text0314"></small></div>
					<div><small id="msg_datahub_text0315"></small></div>
					<div><small id="msg_datahub_text0316"></small></div>
				</div>

</div>

</div>
  </div>
</div>

</body>
</html>